<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>{{ msg }}</h1>
</div>
<div id="newsList">
    <h2>资讯列表</h2>
    <p>{{ msg }}</p>
    <hr>
    <ul v-for="ele in newsList">
        <li>序号：{{ ele._id }}</li>
        <li>名称：{{ ele.title }}</li>
        <li>作者：{{ ele.author }}</li>
    </ul>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
<script src="lib/vue.js"></script>
<script type="text/javascript">

    const vm = new Vue({
        el: '#newsList',
        data: {
            msg: 'hi vuejs!',
            newsList: [],
        },
        methods: {
            async getNewsList() {
                let url = 'https://yw.52kfw.cn/api/news/flist?pageSize=5&cate_id=%E7%A7%91%E6%8A%80%E5%85%B4%E5%9B%BD';
                let info = await axios.get(url);
                this.newsList = info.data.data.list;
            },
        },
        // vuejs 有一些特殊的函数，用户只需要定义好，vuejs内部会在特定的事件自动执行
        // 一般是在 created 里面做接口请求
        created() {
            // 完成接口请求
            this.getNewsList();
        },
        mounted() {
            console.log('mounted');
        },
        updated() {
            console.log('updated');
        },
    })


</script>

</html>
